<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页测试</title>
	<link rel="stylesheet" href="<%=request.getContextPath() %>/js/plugins/layui/css/layui.css">
</head>
<body>
	<div id="test"></div>
	<div id="pageDemo"></div>

	<script src="<%=request.getContextPath()%>/js/jquery.min.js?v=2.1.4"></script>
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/plugins/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['layer', 'laypage'], function(){
            var layer = layui.layer,
            laypage = layui.laypage;
          	
            var pageSize = 2;
            function demo(curr){
            	$.getJSON('<%=request.getContextPath() %>/test/page', {
                	pageNum: curr || 1,
                	pageSize : pageSize
              	}, function(res){
              		$("#test").html("");
              		for(var i = 0 ; i < res.data.length; i++){
              			$("#test").append("<li>" + res.data[i].name + "</li>");
              		}
              		
	                //显示分页
	                laypage({
		                cont: 'pageDemo'
		                ,pages: Math.ceil(res.recordsTotal / pageSize)
		                ,curr: curr || 1 //当前页
		                ,groups : 3 // 连续分页数
		                ,jump: function(obj, first){ //触发分页后的回调
		                	if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
		                  		demo(obj.curr);
		                    }
		                }
	                });
              	});
            };
           	
            demo();
        });
	</script>
</body>
</html>